<script setup>
import {computed, ref} from "vue";
import {$menuUtils, $utils} from '@jzl/utils'
import {useCommonStore} from "@jzl/stores"
import {defineIconifyComp, DFT_ICONS} from "@jzl/icons"
import {api} from "@jzl/api"

defineOptions({
  name: 'WorkHeader'
})

const props = defineProps({
  app: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const logoTextShow = ref(false)
const logoShow = ref(true)
const pwdShow = ref(false)
const userInfoShow = ref(false)

const logo = computed(() => {
  return useCommonStore().project?.project_logo || '/assets/images/logo-rect.png';
})

const projectName = computed(() => {
  return useCommonStore().project?.project_name
})

const userAvatar = computed(() => {
  return useCommonStore().loginUser?.avatar
})

const userName = computed(() => {
  return useCommonStore().loginUser?.nickname || useCommonStore().loginUser?.loginname
})

const appName = computed(() => {
  return props.app?.group_name;
})

const loginUid = computed(() => {
  return useCommonStore().loginUser?.id
})

const layoutMenus = computed(() => {
  return useCommonStore().layoutMenus;
})

const handleCommand = (command) => {
  if (command === 'exit') {
    logout();
  } else if(command === 'changePwd') {
    handleShowChangePwd();
  } else if(command === 'userInfo') {
    handleShowUserInfo();
  }
}

const logout = async () => {
  await api.admin.logout();

  // this.$store.state.loginUser = null;
  // this.$store.state.loginCust = null;
  // this.$store.state.token = null;

  $utils.removeToken()
  await $utils.dealNoLogin()
}

const loadLogoError = (e) => {
  logoTextShow.value = true;
}

const loadLogoSuccess = (e) => {
  let target = e?.target;
  // let currentTarget = _.get(e, "currentTarget");
  let width = target?.width, height = target?.height;

  if(width > 0 && height > 0) {
    if(width > 2 * height) {
      logoTextShow.value = false;
    }
  }
}

const handleShowChangePwd = async () => {
  pwdShow.value = true;
}

const handlePwdClose = () => {
  pwdShow.value = false;
}

const handleShowUserInfo = async () => {
  userInfoShow.value = true;
}

const handleUserInfoClose = () => {
  userInfoShow.value = false;
}

</script>

<template>
  <div class="page-header">
    <slot name="headerLogo">
      <div
        class="page-logo" ref="logo"
        :class="{
          'hide-title': !logoTextShow,
          'hide-logo': !logoShow,
        }">
        <slot name="logo">
          <a href="javascript:void(0);"
             v-if="projectName && logo"
             style="margin-right: 10px;"
             v-tippy="{ arrow: true }"
             :content="projectName">
            <img
              :src="logo"
              alt="logo"
              class="logo-img"
              @load="loadLogoSuccess"
              @error="loadLogoError"
            />
          </a>
          <h3 v-text="projectName" class="art-font"></h3>
        </slot>
        <slot name="appName">
          <template v-if="appName">
            <em>|</em>
            <h4 class="art-font" v-text="appName"></h4>
          </template>
        </slot>
      </div>
    </slot>
    <slot name="headerMenus">
      <div
        class="page-header-menus"
        v-if="layoutMenus?.length > 0">
        <div class="page-header-menus-container">
          <div
            class="top-main-nav"
            v-for="m in layoutMenus">
            <a
              class="top-main-navitem"
               href="javascript:void(0);">
              <JIcon
                v-if="$menuUtils.getIconFont(m)"
                class="top-main-navitem-icon"
                :icon="$menuUtils.getIconFont(m)"
              />{{ m.group_name || m.content_name }}
              <JIcon
                v-if="$menuUtils._isGroup(m)"
                :icon="DFT_ICONS.arrowDownSimple"
                class="el-icon-arrow-down top-main-navitem-more"
              />
            </a>
          </div>
        </div>
      </div>
    </slot>
    <slot name="headerUser">
      <div class="page-header-user">
        <!--<div class="top-main-iconnav" :class="downloadBtnClass" v-tippy="{ arrow: true }" content="文件下载"
             @click="handleShowDrawer('download')">
            <i class="fa fa-cloud-download-alt"></i>
            <span class="tag-num" v-if="myDownRecords && myDownRecords.length">{{ myDownRecords.length }}</span>
        </div>-->
        <el-dropdown
          trigger="click"
          @command="handleCommand">
          <span
            class="el-dropdown-link"
            style="display: flex;align-items: center;">
            <img
              v-if="userAvatar"
              class="img-circle"
              :src="userAvatar"/>
            <JIcon
              v-else
              class="avatar-icon"
              :icon="DFT_ICONS.userCircle"
            />
            <span class="username username-hide-on-mobile"> {{ userName }} </span>
            <JIcon
              :icon="DFT_ICONS.arrowDownSimple"
              class="el-icon-arrow-down el-icon--right"
            />
          </span>
          <template #dropdown>
            <el-dropdown-menu
              class="page-header-drop-menu"
            >
              <el-dropdown-item
                command="userInfo"
                :icon="defineIconifyComp(DFT_ICONS.user)"
              >个人信息</el-dropdown-item>
              <el-dropdown-item
                command="changePwd"
                :icon="defineIconifyComp(DFT_ICONS.lock)"
              >修改密码</el-dropdown-item>
              <el-dropdown-item
                command="exit"
                :icon="defineIconifyComp(DFT_ICONS.arrowLeft)"
              >退出</el-dropdown-item>
<!--              <el-dropdown-item
                icon="fa fa-user-circle"
                style="min-width:140px"
                command="userInfo"
              >个人信息</el-dropdown-item>
              <el-dropdown-item
                icon="fa fa-expeditedssl"
                style="min-width:140px"
                command="changePwd">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item
                icon="fa fa-arrow-left"
                style="min-width:140px"
                command="exit">退出
              </el-dropdown-item>-->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </slot>
    <el-dialog
      title="修改密码"
      :visible.sync="pwdShow"
      width="450px"
      :close-on-click-modal="false"
      :append-to-body="true">
      <ChangePassword
        @close="handlePwdClose"
      />
    </el-dialog>

    <el-dialog
      title="个人信息"
      :visible.sync="userInfoShow"
      top="60px"
      width="900px"
      height="600px"
      custom-class="m-dialog-style"
      :close-on-click-modal="false"
      :append-to-body="true">
      <JzlForm
        form-code="_ADMIN"
        view-code="_USER_MY_VIEW"
        :data-id="loginUid"
        @modelclose="handleUserInfoClose"
      />
    </el-dialog>
  </div>
</template>
